<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/lastone.css">
    <title>lastone</title>
</head>

<body>
    <div class="view">
        <div class="page1">
            <div>
                <span class="start">
                    start
                </span>
            </div>
        </div>
        <div class="page2"></div>
        <div class="box"></div>
        <div class="result">
            <div class="home">回到主页</div>
            <div class="again">again</div>
        </div>
    </div>
    <script>
        // 游戏界面
        var box = document.querySelector(".box");
        // 首页
        var page1 = document.querySelector(".page1");
        //  第二页
        var page2 = document.querySelector(".page2");
        // 结果页
        var result = document.querySelector(".result");

        var height = box.offsetHeight;
        var width = box.offsetWidth;
        var r;
        var count = 0,
            num = 1;
        var ball = [];   // 将所创建的点保到数组里面
        var balls = box.getElementsByClassName("ball");
        var dis;
        var lastDate = 0;
        var newDate;
        var flag = false;
        var arr = new Array(2);
        console.log(width, height);

        function newBall(arr) {
            var obj = {
                // 圆心坐标
                "x": arr[0],
                "y": arr[1],
                // 半径
                "r": r
                // "flag": true
            }
            return obj;
        }

        // 创建随机坐标和半径
        function random(arr) {
            // x 坐标
            arr[0] = Math.ceil(Math.random() * width);
            // y 坐标
            arr[1] = Math.ceil(Math.random() * height);
            // 半径
            r = Math.ceil(Math.random() * 50 + 10);
            while (r == 0) {
                r = Math.ceil(Math.random() * 50 + 10);
            }
            // var term = arr[0] < r || arr[1] < r || arr[0]+r > width ||arr[1]+r>height;
//          if(arr[0] + r > width||arr[1] + r > height){
//          	console.log("r",r,"x",arr[0],"y",arr[1]);
//          }
            while (arr[0] < r || arr[0] + r > width) {
                console.log(2);
                // console.log(arr[0]);        
                arr[0] = Math.ceil(Math.random() * width);
                console.log("arr[0]", arr[0], "r", r)

            }
            while (arr[1] < r || arr[1] + r > height) {
                // console.log(3);
                arr[1] = Math.ceil(Math.random() * height);
                console.log("arr[1]", arr[1], "r", r);
            }
            // console.log(2);        
        }

        // 初始化
        function init() {
            num = 1;
            page2.innerHTML = `<div class ="page2_num">${num}</div>`;
            // page2.classList.remove("page2_init")
            // page2.classList.remove("page2_toleft1");
            // page2.classList.remove("page2_toleft2");
            page2.classList.add("page2_toleft1");
            box.innerHTML = "";
            count = 0;
            random(arr);     //创建随机坐标
            console.log(arr, r);
            render(arr, r);//渲染页面
        }

       //不让圆出现重复
        function pd() {
            if (lastDate == 0) {
                lastDate = new Date();
            }

            random(arr);
            if (count != 0) {
                for (var i = 0; i < count; i++) {
                    dis = Math.hypot((ball[i].x - arr[0]), (ball[i].y - arr[1]));//两个圆心之间的距离
                    console.log("dis",dis);

                    if (dis < ball[i].r + r) {  
                        newDate = new Date();
                        if (newDate - lastDate > 1500) {

                            alert("你牛逼!!!")
                            page2.classList.remove("page2_init")
                            page2.classList.remove("page2_toleft1");
                            page2.classList.remove("page2_toleft2");
                            result.style.display = "block";
                            return;
                        }
                        console.log("false", "dis", dis, "i", i);
                        // console.log("i", i);
                        return pd();
                        // dis = Math.hypot((ball[i].x - arr[0]), (ball[i].y - arr[1]));
                        // console.log("false","dis", dis,"i",i);
                    }
                }
            }
            render(arr, r);
        }

        // 渲染页面
        function render(arr, r) {
            // page2.style.display = "none";
            console.log(arr[0], arr[1]);

            box.innerHTML += `<div class = "ball ${count}"></div>`;
            balls[count].style.width = r * 2 + "px";
            balls[count].style.height = r * 2 + "px";
            balls[count].style.left = arr[0] - r + "px";
            balls[count].style.top = arr[1] - r + "px";
            balls[count].style.borderRadius = r + "px";
            ball[count] = newBall(arr, r);
            lastDate = 0;
            count++;

        }

        // 点击圆
        box.addEventListener("click", function (e) {
            // console.log(e.x, e.y);
            // debugger;

            // console.log(e.target.className);
            if (flag){
            	console.log("flag",flag)
                flag = false;
                console.log("aaaa")
                if (e.target.className.indexOf("ball") != -1) {
                    if (e.target.className.indexOf(count - 1) != -1) {
                        num++;
                        page2.innerHTML = `<div class ="page2_num">${num}</div>`
                        page2.classList.remove("page2_init");
                        page2.classList.add("page2_toleft2");
                    } else{
//                      alert("you lose!!!");
                        page2.classList.remove("page2_init")
                        page2.classList.remove("page2_toleft1");
                        page2.classList.remove("page2_toleft2");
                        result.style.display = "block";
                    }
                }else{
                    	flag=true;
                    }
            }

        })

        // 设置结果页的监听事件
        result.addEventListener("click", function (e) {
            if (e.target.className == "home") {
                result.style.display = "none";
                page1.style.display = "block";
            }
            if (e.target.className == "again") {
                result.style.display = "none";
                init();
                // page2.classList.add("page2_toleft1");
            }
        })

        // level页 移动事件监听
        page2.addEventListener("transitionend", function () {
            if (page2.className.indexOf("page2_toleft1") != -1) {
                page2.classList.remove("page2_toleft1");
                page2.classList.add("page2_init")
                flag = true; //level页移动完之后才可以点击，防止倒退
            }
            if (page2.className.indexOf("page2_toleft2") != -1) {
                pd();

                page2.classList.remove("page2_toleft2");
                page2.classList.add("page2_toleft1");
            }


        })


        // 首页点击开始
        page1.addEventListener("click", function (e){
            console.log(e.target.className);

            if (e.target.className == "start") {
                page1.style.display = "none";
                init();


                // page2.style.display = "none";
                // page2.style.transform = "translateX("+0+"px"+")";
                // page2.style.animation = "run 1.5s forwards 1";
            }
        })

        // 测试点击第二页 平移
        // page2.addEventListener("click", function (e) {
        //     if (num == 1) {
        //         page2.classList.add("page2_toleft1");
        //     }

        // })
    </script>
</body>

</html>